<template>
	<view class="content">
		<!-- 手机号 -->
		<view class="phoneContent" style="margin-top: 20rpx;">
			<view class="name">手机号</view>
			<input placeholder="请输入您的手机号" placeholder-class="placeholder" class="input" v-model="phone" maxlength="11" />
		</view>
		<!-- 验证码 -->
		<view class="phoneContent">
			<view class="name">验证码</view>
			<input placeholder="请输入您的短信验证码" placeholder-class="placeholder" class="input" v-model="msgCode" maxlength="8" />
		  <view class="codeContent" @tap="getCodes">{{text}}</view>
		</view>
		<!-- 新密码 -->
		<view class="phoneContent">
			<view class="name">新密码</view>
			<input placeholder="请输入您的新密码" placeholder-class="placeholder" class="input" v-model="payPassword" password maxlength="11" />
		</view>
		<!-- 确认新密码 -->
		<view class="phoneContent">
			<view class="name">确认新密码</view>
			<input placeholder="请再次确认新密码" placeholder-class="placeholder" class="input" v-model="posswardAgain" password maxlength="11" />
		</view>
		<!-- 确认新密码 -->
		<view class="phoneContent">
			<view class="name">身份证后六位</view>
			<input placeholder="请输入身份证后六位" placeholder-class="placeholder" class="input" v-model="idCard" maxlength="6" />
		</view>
		<view class="loginContent" :class="phone && msgCode && payPassword && idCard && posswardAgain?'loginContentSubmit':''" @tap="sure">确认</view>
	</view>
</template>

<script>
	import { updatePayPassword,sendMsg } from '../../api/api.js'
	export default {
		data() {
			return {
				phone:'',
				msgCode:'',
				payPassword:'',
				posswardAgain:'',
				text:'验证码',
				idCard:''
			}
		},
		methods: {
			//获取验证码
			getCodes(){
				if( this.text != '验证码' ) {
					return false
				}
				//判断手机号是否正确
				if((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){ 
					let data = {
						phone:this.phone,
						type:6
					}
					sendMsg(data).then(res=> {
						if ( res.code == 200 ) {
							uni.showToast({
								icon:'none',
								title:'验证码已发送，请注意查收~'
							})
							//正确-发送验证码，变化 text 文字
							var seconds = 60;
							this.text = seconds + 's后重新获取';
							let interval = setInterval(()=>{
							  if(seconds > 0){
								  seconds -- ;
								  this.text = seconds + 's后重新获取'
							  }else{
								  this.text = '验证码';
								  clearInterval(interval)
							  }
							},1000)
						}
					})
			  }else{
				  uni.showToast({
					  icon:'none',
					  title:'请输入正确的手机号~'
				  })
			  }
			},
			sure() {
				if( !this.phone ) {
					uni.showToast({
						icon:'none',
						title:'请输入手机号~'
					})
					return false
				}
				if( !this.payPassword ) {
					uni.showToast({
						icon:'none',
						title:'请输入新密码~'
					})
					return false
				}
				if( !this.posswardAgain ) {
					uni.showToast({
						icon:'none',
						title:'请再次输入新密码~'
					})
					return false
				}
				if( !this.msgCode ) {
					uni.showToast({
						icon:'none',
						title:'请输入短信验证码~'
					})
					return false
				}
				if( !this.idCard ) {
					uni.showToast({
						icon:'none',
						title:'请输入身份证后六位~'
					})
					return false
				}
				if( this.posswardAgain != this.payPassword ) {
					uni.showToast({
						icon:'none',
						title:'两次输入的密码不一致，请重新输入'
					})
					this.posswardAgain = ''
					return false
				}
				let data = {
					phone:this.phone,
					payPassword:this.payPassword,
					msgCode:this.msgCode,
					idNumberSuffix:this.idCard
				}
				updatePayPassword(data).then( res=> {
					if ( res.code == 200 ) {
						uni.showToast({
							icon:'none',
							title:'修改成功~'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						},500)
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: rgba(246, 246, 247, 1);
	}
</style>
<style lang="less">
  .content {
  		display: flex;
  		align-items: center;
  		flex-direction: column;
  		// 手机号
  		.phoneContent {
  			background-color: #fff;
  			position: relative;
  			width: 662rpx;
  			padding: 28rpx 20rpx 16rpx 28rpx;
  			.name {
  				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  				font-weight: 400;
  				font-size: 28rpx;
  				color: #000000;
  				line-height: 36rpx;
  			}
  			.placeholder {
  				font-family: PingFang SC, PingFang SC;
  				font-weight: 500;
  				font-size: 26rpx;
  				color: #BCBDBD;
  				line-height: 26rpx;
  			}
  			.input {
  				margin-top: 24rpx;
  				height: 56rpx;
  				width: 100%;
  				border-bottom: 1rpx solid rgba(249, 249, 249, 1);
  			}
  			.codeContent {
  				position: absolute;
  				right: 40rpx;
  				bottom: 20rpx;
  				font-size: 26rpx;
  				font-family: PingFangSC-Regular, PingFang SC;
  				font-weight: 400;
  				color: rgba(83, 167, 0, 1);
  				line-height: 37rpx;
  			}
  		}
  		.loginContent {
  			width: 670rpx;
  			height: 88rpx;
  			background-color: rgba(225, 225, 225, 1);
  			border-radius: 45rpx;
  			font-size: 28rpx;
  			font-family: PingFangSC-Medium, PingFang SC;
  			font-weight: 500;
  			color: #FFFFFF;
  			line-height: 88rpx;
  			text-align: center;
  			margin-top: 200rpx;
  		}
  		
  		.loginContentSubmit {
  			background-color: rgba(83, 167, 0, 1);
  		}
  	}
</style>
